<template>
	<div>
		<div class="hallTitle">
			<h3>彩种大厅&nbsp<span style='font-weight: bold; font-style: italic; color: #ccc;'>BETHALL</span></h3>
		</div>
		<div class="allLottery">
			<div class="lotteryItem" v-for='item in gameList'>
				<router-link :to="'/playGame/' + item.ticketId" >
					<img :src="imgUrl" :alt="item.ticketName" />
					<span>{{ item.ticketName }}</span>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
  	import img from '../../../assets/img/cqssc.png'
  	import allGameList from '../../../assets/js/hallList/allGameList.js'
  	import hallLeftNav from '../../../assets/js/hallList/hallLeftNav.js'
  
	export default {
		data() {
			return {
				gameList: [],
				imgUrl: img
			}
		},
		created () {
			let list = allGameList(this)
			this.gameList = list
			console.log(this.gameList)
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.hallTitle {
		background-color: #eee;
		width: 100%;
		h3 {
			padding-left: 3.5%;
			line-height: 3.2rem;
			color: #967f7f;
			font-size: 20px;
			font-weight: normal;
			text-align: left;
		}
	}
	.allLottery {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.lotteryItem {
			width: 30%;
			margin-left: 2.5%;
			margin-bottom: 0.6rem;
			box-shadow: 0.2rem 0.2rem 0.2rem #ccc;
			a {
				display: inline-block;
				width: 100%;
				background-color: #fff;
			}
			img {
				display: block;
				width: 4.8rem;
				height: 4.8rem;
				margin: 0 auto;
			}
			span {
				display: block;
				line-height: 2rem;
				text-align: center;
			}
		}
	}
</style>
